<style>
figure, figcaption {
display: block;
}
#polaroid{
width:100%;
overflow:hidden;
padding:20px 10px;
}
#polaroid figure{
float:left;
position:relative;
width:245px;
margin:10px 20px;
padding: 6px 8px 10px 8px;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background: #eee6d8;
background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
}
#polaroid figure:nth-child(even) {
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#polaroid figure:before {
content: '';
display: block;
position: absolute;
left:5px;
top: -15px;
width: 75px;
height: 25px;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#polaroid figure:nth-child(even):before {
left:150px;
top: -15px;
width: 55px;
height: 25px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#polaroid figcaption{
text-align:center;
font-family: 'Reenie Beanie', cursive;
font-size:0.9em;
color:#454f40;
letter-spacing:0.08em;
}
#polaroid figure{
-pie-background: linear-gradient(#ede1c9, #fef8e2 20%, #f2ebde 60%);
behavior: url(assets/pie/PIE.htc);
position:relative; 
padding-top:10px\9;
padding-right:10px\9;
}
</style>
<?php if(!empty($resList)){?>
<?php foreach($resList as $key=>$val)?><?php } ?>
<section id="divCatReviews_1" class="cat-widget wdg-cat-reviews cat-scroll-box clearfix" data-showonscroll="true" data-animation="fadeIn">
    <div class="widget-title">
        <h3><a href="#"><?php echo $val["name"]; ?></a></h3>
        <div class="sep-widget"></div>
    </div><br/>
    {_include detail_slide}
    <hr/>
    <div class="row">
        <div class="col-md-3"><h4>รายละเอียด</h4></div>
        <div class="col-md-7"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
    </div>
    <p><?php echo $val["content"];?></p><br/>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4"><a href="<?php echo base_url("restaurant/user_review/".$val["id"]);?>">
            <img src="<?php echo $imagepath;?>/write1.png" onMouseOver="<?php echo $imagepath;?>/write2.png"></a>
        </div>
        <div class="col-md-4">
            <a href="#"><img src="<?php echo $imagepath;?>/post1.png" onMouseOver="<?php echo $imagepath;?>/post2.png"></a>
        </div>
    </div><br/>
    <div class="widget-title">
        <div class="sep-widget"></div>
    </div><br/>
   <?php if(!empty($revList)){?>
   <?php foreach($revList as $key=>$values){?>
    <div class="row">
        <div class="col-md-2">
            <a href="#"><img src="<?php echo $imagepath;?>/new6.jpg" width="71" height="70"></a>
        </div>         
        <div class="col-md-10">
            <h3><a href="<?php echo base_url("home/user_pro");?>">น้องเบียร์</a></h3>
            <div class="meta-info">
                <span class="date-time"><i class="icon-alarm2"></i> 26 Feb 2013, 05:15 AM</span>
            </div>
        </div>
    </div> 
    <h3><?php echo $values['impression'];?></h3>
    <?php echo $values['content'];?>
    <div id="polaroid">
   <?php foreach($values['image'] as $key=>$value){?>
      <figure>
        <img src="<?php echo $imagepath;?>/upload/image_medium/<?php echo $value['medium'];?>" width="230" height="250" alt="Red mushroom" />
          <figcaption><?php echo $value['title'];?></figcaption>
      </figure>
    <?php } ?>
    </div>
    <hr/>
    <?php } 
    } ?>
    
    
</section>
